<!--
 * @Descripttion: 
 * @version: 
 * @Author: 程
 * @Date: 2022-12-01 11:32:04
 * @LastEditors: 程
 * @LastEditTime: 2023-05-19 09:57:31
-->
<template>
  <div class="main">
    <h3>{{ $t('tool.directory7') }}</h3>
    <div class="line"></div>
    <div class="card">
      <el-card class="card-item" v-for="item in items.list" :key="item.id" @click="toUrl(item.url)">
        <div class="title">{{ item.text }}</div>
        <img class="logo" :src="item.img" alt="" />
        <div class="intr">{{ item.introduction }}</div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
const items = reactive({
  list: [
    { id: 1, text: 'learningRoute', introduction: '开发者学习路线图', img: getImageUrl('learningRoute'), url: 'https://roadmap.sh/roadmaps' },
    { id: 4, text: 'Excalidraw', introduction: 'Excalidraw在线画图工具', img: getImageUrl('threejs'), url: 'https://excalidraw.com/' },
    { id: 5, text: 'V2Club', introduction: '科学上网工具', img: getImageUrl('q'), url: 'https://my.v2fly.club/#/dashboard' },
    { id: 6, text: 'Mojie', introduction: '科学上网工具-2', img: getImageUrl('q'), url: 'https://www.mojie.me/#/login' },
    { id: 7, text: 'Mac', introduction: 'mac软件免费下载', img: getImageUrl('bz'), url: 'https://appstorrent.ru/programs/' },
    { id: 8, text: 'Music', introduction: '音乐免费下载', img: getImageUrl('music'), url: 'https://music.liuzhijin.cn/' },
    { id: 9, text: 'MD', introduction: '马克飞象MD文档在线编写', img: getImageUrl('md'), url: 'https://maxiang.io/' },
    { id: 10, text: 'Tinypng', introduction: '熊猫图片压缩', img: getImageUrl('xm'), url: 'https://tinypng.com/' },
    { id: 11, text: 'Mdn', introduction: '开发人员资源', img: getImageUrl('mdn'), url: 'https://developer.mozilla.org/zh-CN/' },
    { id: 12, text: 'Ipinfo', introduction: '本机代理ip查询', img: getImageUrl('ipinfo'), url: 'https://ipinfo.io/' },
    { id: 14, text: 'AlmightyWebsite', introduction: '全能网站', img: getImageUrl('AlmightyWebsite'), url: 'https://www.ahhhhfs.com/' },
    { id: 15, text: 'ImageTool', introduction: '多功能图片转换器', img: getImageUrl('imgtool'), url: 'https://imagestool.com/webp2jpg-online/' },
    { id: 17, text: 'Magiconch', introduction: '神奇海螺试验场', img: getImageUrl('bz'), url: 'https://lab.magiconch.com/' },
    { id: 18, text: 'Befunky', introduction: '图片滤镜修改', img: getImageUrl('imglv'), url: 'https://www.befunky.com/create/photo-to-cartoon/' },
  ],
});
function getImageUrl(name: string) {
  if (name === 'ipinfo' || name === 'zb') {
    return new URL(`/tool/${name}.svg`, import.meta.url).href;
  } else {
    return new URL(`/tool/${name}.png`, import.meta.url).href;
  }
}
function toUrl(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding-bottom: 50px;
  background: var(--home-bg-color, #f5f6fb);
  padding-top: 50px;
  h3 {
    font-size: 28px;
    margin-bottom: 10px;
    margin-left: 50px;
  }
  .line {
    height: 1px;
    background: #ccc;
    margin-left: 50px;
    width: 95%;
    margin-bottom: 20px;
  }
}
.card {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  gap: 15px;
  margin-top: 15px;
  &-item:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  &-item {
    width: 200px;
    height: 200px;
    display: grid;
    place-content: center;
    cursor: pointer;
    text-align: center;
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      margin-top: 10px;
    }
    .title {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: var(--home-text-color, #000);
      margin-top: -10px;
    }
    .intr {
      font-weight: bold;
      color: var(--home-tips-color, #606266);
      height: 20px;
      margin-top: 20px;
      line-height: 20px;
    }
  }
}
</style>
